<template>
  <AppPage fullViewport>
    <div class="register-form">
      <div>
        <div class="register-header">
          <h1>{{ appStore.name }}</h1>
        </div>
        <FormMain ref="formMain" :list="list" :data="data" labelPosition="top">
          <template #account="scope">
            <ElInput v-bind="scope" />
          </template>
          <template #pwd="scope">
            <ElInput v-bind="scope" />
          </template>
          <template #pwd_confirm="scope">
            <ElInput v-bind="scope" />
          </template>
          <template #mobile="scope">
            <ElInput v-bind="scope" />
          </template>
        </FormMain>

        <div class="register-btnGroup">
          <ElButton type="primary" @click="onClick">注册</ElButton>
          <ElButton text type="primary" @click="goToLoginPage">登录</ElButton>
        </div>
      </div>
    </div>
  </AppPage>
</template>
<script setup lang="ts">
import type {
  FormMainInstance,
  FormItemConfigList,
  FormModel,
} from "@/components/form";
import {
  generateFormData,
  stringifyFormData,
  FormVerifyCode,
} from "@/components/form";
import type { RegisterParams } from "@/api";
import { sendVerifyCode, accountRegister } from "@/api";
import { loginPath } from "@/router";
import { useAppStore } from "@/store";

const appStore = useAppStore();

const router = useRouter();

const list: FormItemConfigList<
  RegisterParams & {
    pwd_confirm: string;
  },
  {
    pwd_confirm: never;
  }
> = [
  {
    key: "account",
    label: "账号",
    init: "",
    rules: [{ required: true, message: "请输入账号", trigger: "blur" }],
    extra: {
      isInput: true,
    },
  },
  {
    key: "pwd",
    label: "密码",
    init: "",
    props: {
      type: "password",
      showPassword: true,
    },
    rules: [
      { required: true, message: "请输入密码", trigger: "blur" },
      {
        message: "限定6-20个以内字母、数字、特殊字符(@#$%&*()_+-=)",
        pattern: /^[\w@#$%&*()_+\-=]{6,20}$/,
        trigger: "blur",
      },
    ],
    extra: {
      isInput: true,
    },
  },
  {
    key: "pwd_confirm",
    label: "确认密码",
    props: {
      type: "password",
      showPassword: true,
      maxlength: 20,
    },
    extra: {
      isInput: true,
    },
    rules: [
      { required: true, message: "请输入确认密码", trigger: "blur" },
      {
        validator: (_rule, value, callback) => {
          if (value !== data.value.pwd) {
            callback("两次输入密码不一致!");
          } else {
            callback();
          }
        },
        trigger: "blur",
      },
    ],
    stringify: () => undefined,
  },
  {
    key: "mobile",
    label: "手机号",
    init: "",
    props: {
      type: "tel",
      maxlength: 11,
    },
    rules: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号",
        trigger: "blur",
      },
    ],
    extra: {
      isInput: true,
    },
  },
  {
    key: "verify",
    label: "验证码",
    init: "",
    rules: [
      {
        required: true,
        trigger: "blur",
        message: "请输入验证码",
      },
    ],
    render: FormVerifyCode,
    extra: {
      isInput: true,
    },
    props: () => ({
      api: () => sendVerifyCode(),
    }),
  },
];

const data = ref<FormModel<typeof list>>(generateFormData(list));

const formMain = ref<FormMainInstance>();

const onClick = () => {
  formMain.value?.validate().then(() => {
    accountRegister(stringifyFormData(data.value, list)).then(() => {
      router.replace(loginPath);
    });
  });
};

const goToLoginPage = () => {
  router.replace(loginPath);
};

onMounted(() => {
  data.value = generateFormData(list);
});
</script>
<style lang="less" scoped>
.register {
  &-header {
    text-align: center;
    padding-bottom: 100px;
  }
  &-form {
    width: 300px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-btnGroup {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
</style>
